<template>
  <view class="container">
    <!-- 订单类型切换 -->
    <view class="order-tabs">
      <view v-for="(tab, index) in orderTabs" :key="index"
        :class="['tab-item', activeTab === index ? 'active' : '']" @tap="() => handleTabChange(index)">
        <text>{{ tab.name }}</text>
      </view>
    </view>

    <!-- 订单列表 -->
    <scroll-view scroll-y class="order-list">
      <view class="order-item" v-for="(order, index) in orders" :key="index" @click="goToDetail(order.orderId)">
        <view class="order-header">
          <view class="order-left">
            <text class="order-number">订单号：{{ order.expressNo }}</text>
            <uni-tag :text="order.status" :type="getTagType(order.status)" size="small" />
          </view>
          <text class="order-status"
            :style="getOrderStatusStyle(getStatusText(order.status))">{{getStatusText(order.status)}}</text>
          <text class="order-time">{{ order.createTime }}</text>
        </view>

        <view class="order-content">
          <view class="location-info">
            <view class="pickup-point">
              <uni-icons type="location" size="16" color="#666"></uni-icons>
              <text>取件：{{ order.deliverAddress }}</text>
            </view>
            <view class="delivery-point">
              <uni-icons type="location" size="16" color="#666"></uni-icons>
              <text>送达：{{ order.senderAddress }}</text>
            </view>
          </view>

          <view class="order-details">
            <view class="detail-item">
              <text class="label">快递大小：</text>
              <text class="value">{{ order.packageSize }}</text>
            </view>
            <view class="detail-item">
              <text class="label">配送费：</text>
              <text class="value price">¥{{ order.fee }}</text>
            </view>
          </view>
        </view>

        <view class="order-footer">
          <view class="total-amount">
            <text>总计：</text>
            <text class="amount">¥{{ order.fee }}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
  import { ref, computed } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
  import { getAcceptOrderList, getPublishOrderList } from '../../../api/order';

  const activeTab = ref(0);
  const activeStatus = ref(0);

  // 订单类型选项
  const orderTabs = ref([
    { name: '我收到的', count: 12 },
    { name: '我发出的', count: 8 },
  ]);

  // 状态筛选选项
  const statusFilters = ref(['全部', '待支付', '待取件', '配送中', '已完成']);

  // 订单列表数据
  const orders = ref([]);

  const handleTabChange = (index: number) => {
    activeTab.value = index;
    if (activeTab.value === 0) {
      fetchGetAcceptOrderList();
    }
    fetchOrderList();
  }

  // 状态值与文字映射
  const statusMap: Record<number, string> = {
    0: '待支付',
    1: '待取件',
    2: '配送中',
    3: '已完成',
    4: '已取消'
  };

  // 获取状态文字显示
  const getStatusText = (status: number): string => {
    return statusMap[status] || '未知状态'; // 如果没有匹配到状态，返回默认文字
  };

  // 获取状态标签类型
  const getTagType = (status: number): string => {
    const typeMap: Record<number, string> = {
      0: 'warning', // 待支付
      1: 'primary', // 待取件
      2: 'success', // 配送中
      3: 'default', // 已完成
      4: 'danger'   // 已取消
    };
    return typeMap[status] || 'default';
  };

  // 状态筛选处理
  const handleStatusChange = (index: number) => {
    activeStatus.value = index;
  };

  // 取消订单
  const handleCancel = (order: any) => {
    console.log('取消订单:', order.orderNo);
  };

  // 支付订单
  const handlePay = (order: any) => {
    console.log('支付订单:', order.orderNo);
  };

  // 送达订单
  const handleDeliver = (order: any) => {
    console.log('送达订单:', order.orderNo);
  };
  
  const goToDetail=(orderId: any)=>{
	  uni.navigateTo({
	  	url:`/pages/orderDetail/orderDetail?orderId=${orderId}&status=${activeTab.value}`
	  })
  }

  // 根据状态返回背景颜色
  const getOrderStatusStyle = (status: string) => {
    const statusColors: Record<string, string> = {
      '待支付': '#F3A73F',  // 橙色
      '配送中': '#4CAF50',  // 绿色
      '待取件': '#2979FF',  // 蓝色
      '已完成': '#999999'   // 灰色
    };
    return {
      backgroundColor: statusColors[status] || '#FFFFFF',  // 默认背景为白色
      color: '#FFFFFF'  // 文字颜色为白色，确保在背景色上清晰可见
    };
  };

  const fetchOrderList = async () => {
    const response = await getPublishOrderList();
    orders.value = response.data
    if (response.code === 200) {
      orders.value = response.data
    }
  }

  const fetchGetAcceptOrderList = async () => {
    const response = await getAcceptOrderList();
    if (response.code === 200) {
      orders.value = response.data
    }
  }
  
  onLoad(()=>{
	  fetchGetAcceptOrderList();
  })

</script>

<style scoped>
	page {
		height: 100%;
	}

	.container {
		min-height: 100%;
		background-color: #f5f5f5;
		display: flex;
		flex-direction: column;
	}

	/* 订单类型切换样式 */
	.order-tabs {
		display: flex;
		background-color: #ffffff;
		padding: 30rpx;
		border-bottom: 1rpx solid #eeeeee;
	}

	.order-tabs .tab-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 14px;
		color: #666666;
		position: relative;
	}

	.order-tabs .tab-item.active {
		color: #2979ff;
		font-weight: bold;
	}

	.order-tabs .tab-item.active::after {
		content: '';
		position: absolute;
		bottom: -30rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 4rpx;
		background-color: #2979ff;
		border-radius: 2rpx;
	}

	.order-count {
		font-size: 12px;
		color: #999999;
		margin-top: 4rpx;
	}

	/* 状态筛选样式 */
	.filter-section {
		display: flex;
		padding: 20rpx 13rpx;
		background-color: #ffffff;
		white-space: nowrap;
	}

	.filter-item {
		padding: 10rpx 30rpx;
		margin-right: 20rpx;
		border-radius: 30rpx;
		font-size: 12px;
		color: #666666;
		background-color: #f5f5f5;
	}

	.filter-item.active {
		color: #ffffff;
		background-color: #2979ff;
	}

	/* 订单列表样式 */
	.order-list {
		flex: 1;
		padding: 0rpx;
	}

	.order-item {
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-top: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.order-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.order-left {
		display: flex;
		align-items: center;
	}

	.order-number {
		font-size: 14px;
		color: #333333;
		margin-right: 20rpx;
	}

	.order-time {
		font-size: 12px;
		color: #999999;
	}

	.order-content {
		border-top: 1rpx solid #eeeeee;
		border-bottom: 1rpx solid #eeeeee;
		padding: 20rpx 0;
	}

	.order-status {
		font-size: 12px;
		width: 50px;
		height: 30px;
		text-align: center;
		display: flex;
		/* 启用 flexbox 布局 */
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
	}

	.location-info {
		margin-bottom: 20rpx;
	}

	.pickup-point,
	.delivery-point {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.pickup-point text,
	.delivery-point text {
		margin-left: 10rpx;
		font-size: 14px;
		color: #333333;
	}

	.order-details {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.detail-item {
		display: flex;
		align-items: center;
	}

	.detail-item .label {
		font-size: 12px;
		color: #999999;
		margin-right: 10rpx;
	}

	.detail-item .value {
		font-size: 14px;
		color: #333333;
	}

	.detail-item .value.price {
		color: #ff3d00;
		font-weight: bold;
	}

	.order-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}

	.total-amount {
		display: flex;
		align-items: center;
	}

	.total-amount .amount {
		font-size: 16px;
		color: #ff3d00;
		font-weight: bold;
		margin-left: 10rpx;
	}

	.action-buttons {
		display: flex;
		gap: 20rpx;
	}
</style>